<template>
	<view class="activity_page">
		<!-- 导航栏 -->
		<view class="head_box active">
			<cu-custom :isBack="true" backColor="rgba(84,137,198)">
				<block slot="content">
					<text class="nav-title shopro-selector-rect">活动报名</text>
				</block>
			</cu-custom>
		</view>
		<!-- <image src="https://sprtcar.oss-cns-chengdu.aliyuncs.com/home/activity_head.png" class="activity_bg activity_header" mode=""></image> -->
		<!-- <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/activity_foot.png" class="activity_bg activity_footer" mode=""></image> -->
		<view class="content_box">
			<scroll-view class="scroll-box" scroll-y scroll-with-animation enable-back-to-top>
				<view class="wrapper">
					<view class="banner">
						<image :src="msgObj.image_url" class="banner_img" mode=""></image>
						<view class="tag">{{statusText}}</view>
					</view>
					<view class="common-wrapper">
						<view class="commbox commbox_line">
							<view class="common-title">
								<view class="title">活动时间：</view>
							</view>
							<view class="common-content short">
								{{msgObj.start_time_text}}-{{msgObj.end_time_text}}
							</view>
						</view>
						<view class="commbox commbox_line">
							<view class="common-title">
								<view class="title">报名时间：</view>
							</view>
							<view class="common-content short">
								{{msgObj.enliststart_time_text}}-{{msgObj.enlistend_time_text}}
							</view>
						</view>
						<view class="commbox commbox_line">
							<view class="common-title">
								<view class="title">报名人数：</view>
							</view>
							<view class="common-content short">
								{{msgObj.user_num}}/{{msgObj.num == 0 ? '不限制' : msgObj.num}}
							</view>
						</view>
						<view class="commbox">
							<view class="common-title">
								<view class="title">活动详情：</view>
							</view>
							<view class="common-content ctex" v-html="msgObj.str"></view>
						</view>
						<view class="images_url_box">
							<image :src="item" v-for="(item, i) in msgObj.images_url" :key="i" class="images_img" mode="aspectFit"></image>
						</view>
						<view class="commbox">
							<view class="common-title bgc">
								<view class="title">报名记录：</view>
							</view>
							<scroll-view class="scroll-box bgctx" scroll-y scroll-with-animation enable-back-to-top>
							<!-- <view class="bgctx"> -->
								<view class="line" v-for="(item, i) in msgObj.user_list" :key="i">
									<span class="names texts">{{item.nickname}}</span>
									<span class="date texts">{{item.time}}</span>
								</view>
							<!-- </view> -->
							</scroll-view>
						</view>
						<view class="btnarea">
							<!-- <view class="btns share" @click="openMask('1')">分享</view> -->
							<!-- #ifdef MP-WEIXIN -->
								<!-- <view class="btns share" @click="onShare">分享</view> -->
								<button class="btns share" open-type="share">分享</button>
							<!-- #endif -->
							<view v-if="status == 1" class="btns enroll">已报名</view>
							<view v-if="status == 2" class="btns enroll">报名结束</view>
							<view v-if="status == 3" class="btns enroll" @click="activityPay('2')">立即报名</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="mask" v-if="showMask">
			<view class="pad"  :class="[type == '1' ? 'share' : 'enroll']">
				<image class="bgimg" v-if="type=='1'" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/share.png"></image>
				<image class="bgimg" v-else src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/enroll.png"></image>
				<view class="container">
					<view class="title">{{type == '1' ? '分享' : '报名'}}成功</view>
					<view class="btns" :class="[type == '1' ? 'btnb' : 'btny']" @click="closeMask()">
						返回
					</view>
				</view>
			</view>
		</view>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" :goodsInfo="msgObj" :posterType="'activityRegist'"></shopro-share>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
	import ShoproPay from '@/common/shopro-pay';
	export default {
		data() {
			return {
				id: '',
				msgObj: {
					enlistend_time_text: 0
				},
				showMask: false,
				type:'1',// 1分享 2报名
				showShare: false
			};
		},
		computed:{
			status() {
				let date = (new Date(this.msgObj.enlistend_time_text)).getTime()
				let nowDate = (new Date()).getTime()
				if(this.msgObj.is_enroll) {
					return 1
				} else if(nowDate > date) {
					return 2
				} else{
					return 3
				}
			},
			statusText() {
				if(this.status == 1) {
					return '已报名'
				} else if(this.status == 2) {
					return '报名结束'
				} else{
					return '报名中'
				}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getMsg(option.id)
		},
		// 分享
		onShareAppMessage () {
			return {
				title: this.msgObj.title,
				imageUrl: this.msgObj.image_url,
				path: `/pages/index/index?share=activityRegist&id=${this.id}`
			}
		},
		methods: {
			// 分享
			// onShare() {
			// 	this.showShare = true;
			// },
			getMsg(id) {
				let that = this
				that.$apiBase('activity', {
					id
				}).then(res => {
					if (res.code === 1) {
						let str = res.data.content.replace(/<img /g, '<img class="rich_img" ')
						let descriptionStr = res.data.description.replace(/<img /g, '<img class="rich_img" ')
						that.msgObj = {
							...res.data,
							str,
							descriptionStr
						}
					}
				})
			},
			openMask(types) {
				this.type = types;
				this.showMask = true;
			},
			closeMask() {
				this.showMask = false;
			},
			// 立即购买
			onPay(pay) {
				console.log(pay)
				let that = this
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: pay.timeStamp,
				    nonceStr: pay.nonceStr,
				    package: pay.package,
				    signType: pay.signType,
				    paySign: pay.paySign,
				    success: function (res) {
				        console.log('success:' + JSON.stringify(res));
								that.showMask = true
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			},
			activityPay() {
				let that = this
				uni.navigateTo({
					url: '../order/newConfirm?id=' + this.id
				})
			}
		},
	}
</script>

<style lang="scss">
.activity_page{
	min-height: 1590rpx;
	position: relative;
	padding-bottom: 165rpx;
	background: #fff;
	.activity_bg{
		position: absolute;
		left: 0;
		width: 750rpx;
		&.activity_header{
			top: 0;
			height: 1129rpx;
		}
		&.activity_footer{
			bottom: 0;
			height: 311rpx;
		}
	}
}
.wrapper {
	box-sizing: border-box;
	padding: 20rpx 30rpx 30rpx;
	// background: #93B6DA;
	.banner {
		height: 491rpx;
		border-radius: 20rpx;
		position: relative;
		margin-bottom: 30rpx;
		overflow: hidden;
		.banner_img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
		.tag {
			position: absolute;
			width: 135rpx;
			height: 54rpx;
			line-height: 54rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			background: #FFF100;
			top: 33rpx;
			left: 40rpx;
			z-index: 1;
			border-radius: 50rpx;
			text-align: center;
		}
	}
	.common-wrapper {
		box-sizing: border-box;
		.commbox{
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 0 6rpx;
			.common-title{
				height: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items:center;
				box-sizing: border-box;
				&.bgc {
					height: 60rpx;
				}
				.title {
					font-size: 30rpx;
					color: #000000;
					font-weight: bold;
					font-family: PingFang SC;
					&::before {
						content: "";
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background: #FF8F00;
						border-radius: 50%;
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}
			}
			.common-content {
				// color: #FFFFFF;
				font-weight: bold;
				font-size: 30rpx;
				box-sizing: border-box;
				padding: 10rpx 0;
				&.short{
					line-height: 60rpx;
				}
				&.ctex{
					font-size: 26rpx;
					line-height: 40rpx;
				}
			}
			.bgctx {
				height: 390rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 30rpx;
				.line {
					height: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items:center;
					box-sizing: border-box;
					&~.line{
						margin-top: 19rpx;
					}
					.texts {
						color: #333333;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						&.names {
							width: 50%;
							overflow: hidden;
							text-overflow: ellipsis; 
							white-space: nowrap;
						}
					}
				}
			}
		}
		.banner {
			height: 424rpx;
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;
			.banner_img {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.btnarea {
			margin-top: 60rpx;
			height: 97rpx;
			display: flex;
			justify-content: space-between;
			align-items:center;
			.btns {
				height: 97rpx;
				width: 274rpx;
				text-align: center;
				line-height: 97rpx;
				font-weight: bold;
				font-size: 34rpx;
				box-sizing: border-box;
				border-radius: 60rpx;
				&.share {
					border: 3rpx solid #E88D99;
					background-color: #ffffff;
					color: #E88D99;
				}
				&.enroll {
					background-color: #E88D99;
					color: #ffffff;
				}
			}
		}
	}
}

.mask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,0.8);
	.pad{
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		width: 631rpx;
		height: 908rpx;
		border-radius: 20rpx;
		.bgimg {
			width: 631rpx;
			height: 908rpx;
		}
		// &.share {
		// 	background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/share.png') no-repeat;
		// }
		// &.enroll {
		// 	background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/enroll.png') no-repeat;
		// }
		.container {
			width: 360rpx;
			height: 280rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			right: 0;
			left: 0;
			bottom: 180rpx;
			margin: auto;
			.title {
				font-size: 60rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #323232;
				text-align: center;
			}
			.btns {
				width: 360rpx;
				height: 91rpx;
				line-height: 91rpx;
				border-radius: 50rpx;
				box-sizing: border-box;
				border-radius: 45px;
				text-align: center;
				&.btnb {
					color: #1E9AD7;
					border: 1px solid #1E9AD7;
				}
				&.btny {
					color: #FFB413;
					border: 1px solid #FFB413;
				}
			}
		}
	}
}
.images_img{
	width: 100%;
	margin: 20rpx 0;
}
</style>
